<template>
    <div>
        <table id="supplierTable">
            <tr>
                <td colspan="15">供应商展示&nbsp&nbsp<a href="#" @click="showAddTable">添加供应商</a></td>
            </tr>
            <tr class="data-table">
                <td>序号</td>
                <td>供应商名称</td>
                <td>联系人</td>
                <td>联系方式</td>
                <td>供应商地址</td>
                <td>绑定用户</td>
                <td>开户行</td>
                <td>银行账号</td>
                <td>收款人</td>
                <td>备注</td>
                <td>版本号</td>
                <td>创建时间</td>
                <td>更新时间</td>
                <td colspan="2">操作</td>
            </tr>
            <tr v-for="sup in supplierList" class="data-table">
                <td>{{ sup.supplierId }}</td>
                <td>{{ sup.supplierName }}</td>
                <td>{{ sup.supplierPerson }}</td>
                <td>{{ sup.supplierPhone }}</td>
                <td>{{ sup.supplierAddress }}</td>
                <td>{{ sup.supplierUserId }}</td>
                <td>{{ sup.supplierBank }}</td>
                <td>{{ sup.supplierBanknum }}</td>
                <td>{{ sup.supplierBankperson }}</td>
                <td>{{ sup.supplierRemark }}</td>
                <td>{{ sup.supplierVersion }}</td>
                <td>{{ sup.createTime }}</td>
                <td>{{ sup.updateTime }}</td>
                <td><a href="#" @click="showEditTable(sup.supplierId)">修改</a></td>
                <td><a href="#" @click="deleteSupplier(sup.supplierId)">删除</a></td>
            </tr>
        </table>
        <table id="addSupplierTable" v-if="showAddSupplierTable">
            <tr>
                <td colspan="2">添加供应商</td>
            </tr>
            <tr>
                <td>供应商名称</td>
                <td><input v-model="supplier.supplierName"></td>
            </tr>
            <tr>
                <td>联系人</td>
                <td><input v-model="supplier.supplierPerson"></td>
            </tr>
            <tr>
                <td>联系方式</td>
                <td><input v-model="supplier.supplierPhone"></td>
            </tr>
            <tr>
                <td>供应商地址</td>
                <td><input v-model="supplier.supplierAddress"></td>
            </tr>
            <tr>
                <td>绑定用户</td>
                <td><input v-model="supplier.supplierUserId"></td>
            </tr>
            <tr>
                <td>开户行</td>
                <td><input v-model="supplier.supplierBank"></td>
            </tr>
            <tr>
                <td>银行账号</td>
                <td><input v-model="supplier.supplierBanknum"></td>
            </tr>
            <tr>
                <td>收款人</td>
                <td><input v-model="supplier.supplierBankperson"></td>
            </tr>
            <tr>
                <td>备注</td>
                <td><input v-model="supplier.supplierRemark"></td>
            </tr>
            <tr>
                <td>版本号</td>
                <td><input v-model="supplier.supplierVersion"></td>
            </tr>
            <tr>
                <td>创建时间</td>
                <td><input v-model="supplier.createTime"></td>
            </tr>
            <tr>
                <td>更新时间</td>
                <td><input v-model="supplier.updateTime"></td>
            </tr>
            <tr>
                <td><a href="#" @click="addSupplier">提交添加</a></td>
                <td><a href="#" @click="showAddSupplierTable = false">关闭</a></td>
            </tr>
        </table>
        <table id="editSupplierTable" v-if="showEditSupplierTable">
            <tr>
                <td colspan="2">修改供应商 ID: {{ supplier.supplierId }}</td>
            </tr>
            <tr>
                <td>供应商名称</td>
                <td><input v-model="supplier.supplierName"></td>
            </tr>
            <tr>
                <td>联系人</td>
                <td><input v-model="supplier.supplierPerson"></td>
            </tr>
            <tr>
                <td>联系方式</td>
                <td><input v-model="supplier.supplierPhone"></td>
            </tr>
            <tr>
                <td>供应商地址</td>
                <td><input v-model="supplier.supplierAddress"></td>
            </tr>
            <tr>
                <td>绑定用户</td>
                <td><input v-model="supplier.supplierUserId"></td>
            </tr>
            <tr>
                <td>开户行</td>
                <td><input v-model="supplier.supplierBank"></td>
            </tr>
            <tr>
                <td>银行账号</td>
                <td><input v-model="supplier.supplierBanknum"></td>
            </tr>
            <tr>
                <td>收款人</td>
                <td><input v-model="supplier.supplierBankperson"></td>
            </tr>
            <tr>
                <td>备注</td>
                <td><input v-model="supplier.supplierRemark"></td>
            </tr>
            <tr>
                <td>版本号</td>
                <td><input v-model="supplier.supplierVersion"></td>
            </tr>
            <tr>
                <td>创建时间</td>
                <td><input v-model="supplier.createTime"></td>
            </tr>
            <tr>
                <td>更新时间</td>
                <td><input v-model="supplier.updateTime"></td>
            </tr>
            <tr>
                <td><a href="#" @click="updateSupplier">提交修改</a></td>
                <td colspan="2"><a href="#" @click="showEditSupplierTable = false">关闭修改</a></td>
            </tr>
        </table>
    </div>
</template>
<script>
export default {
    name: 'SupplierManager',
    data() {
        return {
            supplierList: [],

            showAddSupplierTable: false,
            showEditSupplierTable: false,

            supplier: {},
        }
    },
    // 已挂在 (生命周期用的是比较多)(虚拟DOM已经渲染成真实DOM,DOM操作生效)
    // 1、发起后端请求，拿回数据 2、接收页面之间的传递的参数 3、子组件向父组件传递参数
    mounted: function () {
        this.getSupplierList();
    },
    watch: {},
    methods: {
        getSupplierList: function () {
            this.$axios.get("http://localhost:8080/orSupplier/listAllOrSupplier")
                .then(res => {
                    // console.log(res.data);
                    this.supplierList = res.data
                }).catch(err => {
                    console.log(err);
                })
        },
        deleteSupplier: function (supplierId) {
            this.$axios.delete("http://localhost:8080/orSupplier/deleteOrSupplierById?supplierId=" + supplierId)
                .then(res => {
                    // console.log(res.data);
                    alert(res.data);
                    this.getSupplierList();
                }).catch(err => {
                    console.log(err);
                })
        },
        addSupplier: function () {
            this.$axios.post("http://localhost:8080/orSupplier/addOrSupplier", this.supplier)
                .then(res => {
                    // console.log(res.data);
                    alert(res.data);
                    this.getSupplierList();
                }).catch(err => {
                    console.log(err);
                }).then(
                    this.showAddSupplierTable = false)
        },
        updateSupplier: function () {
            this.$axios.put("http://localhost:8080/orSupplier/updateOrSupplier", this.supplier)
                .then(res => {
                    console.log(res.data);
                    alert(res.data);
                    this.getSupplierList();
                }).catch(err => {
                    console.log(err);
                }).then(
                    this.showEditSupplierTable = false)
        },
        showEditTable: function (supplierId) {
            this.$axios.get("http://localhost:8080/orSupplier/findOrSupplierById?supplierId=" + supplierId)
                .then(res => {
                    // console.log(res.data);
                    this.supplier = res.data
                }).catch(err => {
                    console.log(err);
                }).then(
                    this.showEditSupplierTable = true,
                    this.showAddSupplierTable = false
                );
        },
        showAddTable: function () {
            this.showAddSupplierTable = true;
            this.showEditSupplierTable = false;
            this.supplier = {};
        },
    },
    filters: {
        filterIDnumber: function (idNumber, arg) {
            return idNumber.toString().substr(0, 4) + arg + idNumber.toString().substr(13, 4)
        }
    }
}
</script>